<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent{
            width:240px;
            height:240px;
            padding:50px;
            background:purple;
        }
        #demo{
            width: 100px;
            height: 100px;
            background-color: lime; 
            position: relative;
            padding:40px;
            border:30px solid pink;
        }
        #demo span{
            position: absolute;
            display: block;
            width:100px;
            height:100px;
            background-color: blue;
            /* left:0; */
            /* top:0; */
            z-index:1;
        }
    </style>
</head>
<body>
    <p id="tips">
        <table border="1">
            <tr>
                <td>width()</td>
                <td>只算width</td>
            </tr>
            <tr>
                <td>innerWidth()</td>
                <td>width+padding</td>
            </tr>
            <tr>
                <td>outerWidth()</td>
                <td>width+padding+border</td>
            </tr>
            <tr>
                <td>outerWidth(true)</td>
                <td>width+padding+border+margin</td>
            </tr>
        </table>
    </p>
    <p>
        width:100px;
        height:100px;
        内容区域：蓝色

        padding:40px; 绿色

        border:30px;粉色

        margin:50px;紫色
    </p>
    <div id="parent">
        <div id="demo"><span></span></div>
    </div>
    <div>
        <button>width()</button>
        <button>innerWidth()</button>
        <button>outerWidth()</button>
        <button>outerWidth(true)</button>
        <button>重置</button>
    </div>

    <hr>
    <img src="">

<textarea >
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .father{
            margin:200px auto;
            width:300px;
            height:300px;
            background-color: lime;
            position: relative;
        }
        .son{
            width:100px;
            height:100px;
            background-color: pink;
            position: absolute;
            left:100px;
            top:100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script src="jquery-1.11.1.js"></script>
    <script>
        console.log($('.son').position())
        console.log($('.son').offset())
        console.log($('.son').offset().top === $('.father').offset().top + $('.son').position().top)
        console.log($('.son').offset().left === $('.father').offset().left + $('.son').position().left)
    </script>
</body>
</html>
</textarea>

<hr>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $('button').eq(0).click(function(){
            $('#demo span').css('backgroundColor','gold')
            $('table tr').css('backgroundColor','white').eq(0).css('backgroundColor','pink')
        })
        $('button').eq(1).click(function(){
            $('#demo span').css('backgroundColor','gold')
            $('#demo').css('backgroundColor','gold')
            $('table tr').css('backgroundColor','white').eq(1).css('backgroundColor','pink')
        })
        $('button').eq(2).click(function(){
            $('#demo span').css('backgroundColor','gold')
            $('#demo').css('backgroundColor','gold')
            $('#demo').css('borderColor','gold')
            $('table tr').css('backgroundColor','white').eq(2).css('backgroundColor','pink')
        })
        $('button').eq(3).click(function(){
            $('#demo span').css('backgroundColor','gold')
            $('#demo').css('backgroundColor','gold')
            $('#demo').css('borderColor','gold')
            $('#parent').css('backgroundColor','gold')
            $('table tr').css('backgroundColor','white').eq(3).css('backgroundColor','pink')
        })
        $('button').eq(4).click(function(){
            $('#demo span').css('backgroundColor','blue')
            $('#demo').css('backgroundColor','lime')
            $('#demo').css('borderColor','pink')
            $('#parent').css('backgroundColor','purple')
            $('table tr').css('backgroundColor','white')
        })
    </script>
</body>
</html>